import React, { useEffect, useState } from 'react'
import styles from './index.less'
import close from '../../assets/icon/close.png'

function Index({ children, showModal, onClose }) {
  const [show, setShow] = useState()
  useEffect(() => {
    // console.log(showModal, 'showModal')
    if (showModal) {
      setShow(true)
      document.body.style.overflow = 'hidden'
    } else {
      document.body.style.overflow = 'scroll'
      setShow(false)
    }
    return () => {
      document.body.style.overflow = 'scroll'
    }

  }, [showModal])
  function handelClose() {
    setShow(false)
    onClose()
  }


  return (
    <>
      {
        show && <div className={styles.modalBody}>
          {/* <img
            src={close}
            className={styles.close}
            onClick={handelClose}
          ></img> */}
          {
            children
          }
        </div>
      }
    </>
  )
}

export default Index
